<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
<!--    //qwebchannel.js是必须要导入的-->
    <script src="./js/qwebchannel.js"></script>
    <title>Hello</title>
</head>
<body style="text-align: center; font-size: 1.5rem">
<h2>
    My name is: <input id="nameInput">
</h2>
<input type="file">
<div id="result">
</div>
<button id="sayHello" style="font-size: 1.5rem">
    Say Hello
</button>
<script>
    document.addEventListener('contextmenu', event => event.preventDefault());
    document.addEventListener('DOMContentLoaded', function () {

        const nameInput = document.getElementById('nameInput');
        const result = document.getElementById('result');
        const sayHello = document.getElementById('sayHello');

        // Obtain the exposed python object interface(拿到channel中注册的对象)
        const getBackend = new Promise((resolve, reject) => {
            new QWebChannel(qt.webChannelTransport,
                (channel) => resolve(channel.objects.backend));
        })

        // Call to the other side(调用python方法,并拿到返回值)
        sayHello.addEventListener('click', function(){
            result.textContent = '';
            getBackend.then((backend) => {
                backend.sayHello(nameInput.value, (prediction) => {
                    result.textContent = prediction;
                    console.log(123456)
                });
            })
        });
    });
</script>
</body>
</html>
